
#plangraph-graph
{
    width: 100%;
    border: 1px solid black;
}

#plangraph-graph .node rect 
{
    stroke: #333;
    stroke-width: 1px;
    fill: #fff;
}

#plangraph-graph .node div.label
{
    padding: 4px;
    font-family: monospace;
}
#plangraph-graph .planitem div
{
    color: #077;
}
#plangraph-graph .planitem rect
{
    stroke-width: 3px;
}
#plangraph-graph .planitem.active rect
{
    fill: #DFF;
}
#plangraph-graph .planitem.inactive rect
{
    fill: #DDD;
}
#plangraph-graph .planitem.impossible rect
{
    fill: #DBB;
}

#plangraph-graph .boundaryitem div
{
    color: #770;
}
#plangraph-graph .boundaryitem rect
{
    stroke-width: 3px;
    fill: #FFD;
}
#plangraph-graph .port div
{
    color: #33A;
}
#plangraph-graph .port.active rect
{
    fill: #DDF;
}
#plangraph-graph .port.inactive rect
{
    fill: #BBB;
}
#plangraph-graph .port.impossible rect
{
    fill: #DBB;
}

#plangraph-graph .edgeLabel rect 
{
    fill: #fff;
}

#plangraph-graph .edgePath 
{
    stroke: #333;
    stroke-width: 1.5px;
    fill: none;
}

span.provide_indicator
{
    padding: 4px;
    border-left: 1px solid black;
    margin-right: -3px;
    background-color: gray;
}

.port span.provide_indicator.activeconnection
{
    background-color: greenyellow;
}

span.require_indicator
{
    padding: 4px;
    border-right: 1px solid black;
    margin-left: -3px;
    background-color: gray;
}

.port span.require_indicator.activeconnection
{
    background-color: greenyellow;
}

span.active_indicator
{
    border-radius: 50%;
    height: 36px;
    padding: 4px;
    border: 1px solid #666;
    color: #DDD;
    text-align: center;
    background-color: gray;
}
.active span.active_indicator
{
    background-color: greenyellow;
    color: #666;
}

span.item_modify
{
    border-radius: 50%;
    height: 36px;
    padding: 4px;
    border: 1px solid #666;
    color: #DDD;
    text-align: center;
    background-color: gray;
}
